<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>设置</el-breadcrumb-item>
      <el-breadcrumb-item>个人信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>

      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">个人信息</h3>

    </el-card>

    <el-card style="margin-top: 30px">

      <el-row :gutter="20">
        <el-col :span="8">
          <h4 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">个人信息</h4>
        </el-col>
      </el-row>


      <el-form
          :model="editEmpForm"
          :rules="editEmpFormRules"
          ref="editEmpFormRef"
          label-width="200px"
          label-position="right"
          size="small"
          class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="empname">
        <el-row :gutter="20">
          <el-col :span="5">
              <el-input v-model="editEmpForm.empname"></el-input>
          </el-col>
        </el-row>
        </el-form-item>




        <el-form-item label="头像" prop="">
          <el-row :gutter="20">
            <el-col :span="5">
              <el-input type="hidden" v-model="editEmpForm.empheadportrait"></el-input>
              <el-upload
                  class="avatar-uploader"
                  :action="url5"
                  :show-file-list="false"
                  name="empheadportrait"
                  :on-success="handleAvatarSuccess5"
                  :before-upload="beforeAvatarUpload5">
                <img v-if="imageUrl5" :src="imageUrl5" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon el-upload"></i>
              </el-upload>
            </el-col>
          </el-row>

        </el-form-item>

        <el-form-item label="微信" prop="empwechat">
          <el-row :gutter="20">
            <el-col :span="5">
              <el-input v-model="editEmpForm.empwechat"></el-input>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="QQ" prop="empqq">
          <el-row :gutter="20">
            <el-col :span="5">
              <el-input v-model="editEmpForm.empqq"></el-input>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="员工介绍" prop="empintroduction">
          <el-row :gutter="20">
            <el-col :span="5">
              <el-input v-model="editEmpForm.empintroduction"></el-input>
            </el-col>
          </el-row>
        </el-form-item>


      <el-row :gutter="20">
        <el-col :span="8">
          <h4 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">账户信息</h4>
        </el-col>
      </el-row>

      <el-form-item label="账户信息（手机号）:" prop="empaccount">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-input v-model="editEmpForm.empaccount"></el-input>
          </el-col>
        </el-row>
      </el-form-item>


      <el-form-item label="密码:" prop="emppassword">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-input type="password" v-model="editEmpForm.emppassword" autocomplete="off"></el-input>
          </el-col>
        </el-row>
      </el-form-item>

      </el-form>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-button type="primary" @click="editEmp">提交</el-button>
        </el-col>
      </el-row>
    </el-card>


  </div>
</template>
<script>
export default {
  data() {
    return {
      iurl: this.$MyUrl.imgUrl+'manager/',//图片地址
      imageUrl5: '',//组件选中图片反显需要
      url5: this.$MyUrl.serverUrl + 'emp/upload5',//上传地址
      account:'',
      editEmpForm: {
        empname: "",
        empaccount: "",
        emppassword: "",
        status: "",
        empheadportrait: "",
        empqq: "",
        empwechat: "",
        empintroduction: "",
        operator: "",
        inserttime: "",
        updatetime: "",

      },
      editEmpFormRules: {
        empname: [
          {required: true, message: "請輸入姓名", trigger: "blur"},
          {min: 2, max: 16, message: "姓名必须是2-16个字符", trigger: "blur"}
        ],
        empaccount: [
          {required: true, message: "請輸入账号", trigger: "blur"},
          {min: 11, max: 11, message: "手机号长度在11位数字", trigger: "blur"}
        ],
        emppassword: [
          {required: true, message: "請輸入密码", trigger: "blur"},
        ]
      },

    };
  },
  methods: {
    //添加封面图
    handleAvatarSuccess5(res, file) {

      this.imageUrl5 = URL.createObjectURL(file.raw);

      this.editEmpForm.empheadportrait = res.data;
    },
    //添加封面图
    beforeAvatarUpload5(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    editEmp() {
      this.$refs.editEmpFormRef.validate(valid => {
        if (!valid) {
          return;
        }
        let url = "emp/edit"
        this.$axios.put(url, this.editEmpForm).then(res => {
          if (res.data.code = 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.reloadData();
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1000
            })
          }
        })
      })
    },
    //根据名字查列表
    getEmpByAccount() {
      let userjs =sessionStorage.getItem('userInfo');
      let user=JSON.parse(userjs);

      let url = "emp/findEmpByAccount";
      this.$axios.get(url, {
        params: {
          account: user.empaccount
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.editEmpForm = res.data.data;

          this.imageUrl5=this.iurl+this.editEmpForm.empheadportrait;   //头像反显

        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });

    },
    reloadData() {
      this.getEmpByAccount();
    }
  },
  created() {
    this.reloadData();

  }
};
</script>
<style lang="less" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>